<template>
  <div class="app-views">
    <div
      class="item-box"
      v-loading="loading"
      style="border-right: 1px dashed #e6e6e6"
    >
      <div class="sub-title">
        <i
          class="iconfont icon-list"
          style="margin-right: 5px; font-weight: bold"
        ></i>
        <div class="Title">设备列表</div>
      </div>
      <div class="device-list">
        <DCard
          :dName="item.name"
          :isCheck="isCheckCard == item.value"
          @click.native="handlerisCheck(item)"
          v-for="(item, index) in temperList"
          :key="index"
        />
      </div>
    </div>
    <div class="device-views">
      <div class="sub-title">
        <i class="iconfont icon-shebeituceng-" style="margin-right: 5px"></i>
        <div class="Title">设备图</div>
      </div>
      <div class="device-img">
        <div class="device-img-rec">
          <div class="img-box">
            <img :src="ImgUrl" alt="" />
          </div>
          <div class="deviceStatus">
            <div class="title">
              设备状态
              <i
                class="el-icon-edit"
                @click="openParamSet"
                v-hasPermi="['assembly:device:edit']"
              ></i>
            </div>
            <div class="list">
              <div class="item" v-for="item in showDeviceStatus" :key="item.id">
                <div class="descript">
                  <span class="note"> {{ item.note.substr(13) }}</span>
                  <span class="value">
                    {{ item.message }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="signal">
          <div class="sub-title">
            <i
              class="iconfont icon-PLCxinhaoganzhizhongduan"
              style="margin-right: 5px"
            ></i>
            <div class="Title">信号列表</div>
          </div>
          <div class="signal-table">
            <el-table :data="tableData" style="width: 100%" height="100%">
              <el-table-column prop="id" label="ID" width="80" />
              <el-table-column
                prop="cmd"
                label="指令内容"
                width="200"
                show-overflow-tooltip
              />
              <el-table-column
                prop="cmdType"
                label="命今类型"
                show-overflow-tooltip
              />
              <el-table-column prop="createTime" label="时间" width="150">
                <template slot-scope="scope">
                  {{ scope.row.createTime.substr(10) }}
                </template>
              </el-table-column>
              <el-table-column label="完成状态" width="100">
                <template slot-scope="scope">
                  <el-tag :type="scope.row.state | tagType">{{
                    scope.row.state | status
                  }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                  <el-button
                    icon="el-icon-close"
                    type="text"
                    v-if="!scope.row.state"
                    v-hasPermi="['assembly:device:edit']"
                    @click="handlerCmd('fallbackAction', scope.row)"
                    >取消</el-button
                  >
                  <el-button
                    icon="el-icon-check"
                    type="text"
                    v-if="!scope.row.state"
                    v-hasPermi="['assembly:device:edit']"
                    @click="handlerCmd('executionCompleted', scope.row)"
                    >完成</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <div class="item-box">
      <LogView :jobGroup="8" :isShow="isShow" />
    </div>
    <el-drawer title="设备参数" :visible.sync="drawer" :direction="direction">
      <div class="draw_body" v-loading="loadDeviceParam">
        <div class="params" v-if="deviceParams != null">
          <div class="param_item_W">
            <div class="paramsName">允许进炉</div>
            <div class="paramView">
              <el-radio-group v-model="deviceParams.object.state">
                <el-radio :label="true">开启</el-radio>
                <el-radio :label="false">关闭</el-radio>
              </el-radio-group>
            </div>
          </div>
          <div class="param_item_W">
            <div class="paramsName">允许开新炉</div>
            <div class="paramView">
              <el-radio-group v-model="deviceParams.object.allowNewFur">
                <el-radio :label="true">开启</el-radio>
                <el-radio :label="false">关闭</el-radio>
              </el-radio-group>
            </div>
          </div>
          <div class="param_item_W">
            <div class="paramsName">允许接收玻璃</div>
            <div class="paramView">
              <el-radio-group v-model="deviceParams.object.allowGet">
                <el-radio :label="true">开启</el-radio>
                <el-radio :label="false">关闭</el-radio>
              </el-radio-group>
            </div>
          </div>
          <div class="param_item_W">
            <div class="paramsName">优化包批次</div>
            <div class="paramView" style="width: 150px">
              <el-select
                v-model="deviceParams.object.batch"
                placeholder="请选择"
                size="mini"
              >
                <el-option
                  v-for="(item) in batchList"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name"
                >
                  <span
                    style="float: left; margin-right: 30px"
                    :style="{
                      color: item.num != 0 ? 'red' : '',
                    }"
                    >{{ item.name }}</span
                  >
                  <span
                    style="float: right; color: red; font-size: 13px"
                    v-if="item.num != 0"
                    >{{ item.num }}片加急</span
                  >
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="param_item_W">
            <div class="paramsName">玻璃类型</div>
            <div class="paramView" style="width: 150px">
              <el-select
                v-model="deviceParams.object.glassType"
                placeholder="请选择"
                size="mini"
              >
                <el-option
                  v-for="(item, index) in glassType"
                  :key="index"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="param_item_W">
            <div class="paramsName">是否旋转</div>
            <div class="paramView" style="width: 150px">
              <el-select
                v-model="deviceParams.object.rotate"
                placeholder="请选择"
                size="mini"
              >
                <el-option
                  v-for="(item, index) in roateType"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="param_item_W" v-if="isCheckCard == 0">
            <div class="paramsName">钢化类型</div>
            <div class="paramView" style="width: 150px">
              <el-select
                v-model="deviceParams.object.ghType"
                placeholder="请选择"
                size="mini"
              >
                <el-option
                  v-for="item in options2"
                  :key="item.id"
                  :label="item.value"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="param_item_W" v-if="isCheckCard == 0">
            <div class="paramsName">玻璃方向</div>
            <div class="paramView" style="width: 150px">
              <el-select
                v-model="deviceParams.object.placement"
                placeholder="请选择"
                size="mini"
              >
                <el-option
                  v-for="item in options3"
                  :key="item.id"
                  :label="item.value"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="param_item_W">
            <div class="paramsName">旋转优化比例</div>
            <div class="paramView">
              <span
                v-show="rotateRate"
                @click.stop="handlerSpace('rotateRate')"
                >{{ deviceParams.object.rotateRate }}</span
              >
              <el-input-number
                v-show="!rotateRate"
                size="mini"
                ref="rotateRate"
                :max="1"
                v-model="deviceParams.object.rotateRate"
                @blur="handlerSpace('rotateRate')"
              ></el-input-number>
            </div>
          </div>
          <div class="param_item_W">
            <div class="paramsName">炉排片高</div>
            <div class="paramView">
              <span
                v-show="furHeight"
                @click.stop="handlerSpace('furHeight')"
                >{{ deviceParams.object.furHeight }}</span
              >
              <el-input-number
                v-show="!furHeight"
                size="mini"
                ref="furHeight"
                v-model="deviceParams.object.furHeight"
                @blur="handlerSpace('furHeight')"
              ></el-input-number>
            </div>
          </div>
          <div class="param_item_W">
            <div class="paramsName">炉排片宽</div>
            <div class="paramView">
              <span v-show="furWidth" @click.stop="handlerSpace('furWidth')">{{
                deviceParams.object.furWidth
              }}</span>
              <el-input-number
                v-show="!furWidth"
                size="mini"
                ref="furWidth"
                v-model="deviceParams.object.furWidth"
                @blur="handlerSpace('furWidth')"
              ></el-input-number>
            </div>
          </div>
          <div class="param_item_W">
            <div class="paramsName">排炉X轴间隔</div>
            <div class="paramView">
              <span v-show="xSpace" @click.stop="handlerSpace('xSpace')">{{
                deviceParams.object.xSpace
              }}</span>
              <el-input-number
                v-show="!xSpace"
                size="mini"
                ref="xSpace"
                v-model="deviceParams.object.xSpace"
                @blur="handlerSpace('xSpace')"
              ></el-input-number>
            </div>
          </div>
          <div class="param_item_W">
            <div class="paramsName">排炉Y轴间隔</div>
            <div class="paramView">
              <span v-show="ySpace" @click.stop="handlerSpace('ySpace')">{{
                deviceParams.object.ySpace
              }}</span>
              <el-input-number
                v-show="!ySpace"
                size="mini"
                ref="ySpace"
                v-model="deviceParams.object.ySpace"
                @blur="handlerSpace('ySpace')"
              ></el-input-number>
            </div>
          </div>
          <div class="param_item_W">
            <div class="paramsName">玻璃厚度</div>
            <div class="paramView">
              <span v-show="thick" @click.stop="handlerSpace('thick')">{{
                deviceParams.object.thick
              }}</span>
              <el-input-number
                v-show="!thick"
                size="mini"
                ref="thick"
                v-model="deviceParams.object.thick"
                @blur="handlerSpace('thick')"
              ></el-input-number>
            </div>
          </div>
          <div class="param_item_W">
            <div class="paramsName">同一列宽度差</div>
            <div class="paramView">
              <span v-show="allowGap" @click.stop="handlerSpace('allowGap')">{{
                deviceParams.object.allowGap
              }}</span>
              <el-input-number
                v-show="!allowGap"
                size="mini"
                ref="allowGap"
                v-model="deviceParams.object.allowGap"
                @blur="handlerSpace('allowGap')"
              ></el-input-number>
            </div>
          </div>
          <div class="footer">
            <el-button @click="drawer = false">取消</el-button>
            <el-button type="primary" @click="handlerEditDevice"
              >确定</el-button
            >
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import DCard from "@/views/components/production/dCard.vue";
import LogView from "@/views/components/production/logViews.vue";
import { deviceEditParam } from "@/api/assembly/device";
import { temperList } from "../Config/label";
import { mapState } from "vuex";
import mixin from "../mixin/index";
import { temperDB } from "@/config/db";
export default {
  components: {
    DCard,
    LogView,
  },
  mixins: [mixin],
  props: {},
  data() {
    return {
      temperList,
      isCheckCard: 0,
      loading: false,
      isShow: false,
      tableData: [],
      device: null,
      loadDeviceParam: false,
      drawer: false,
      direction: "rtl",
      deviceParams: null,
      furHeight: true,
      rotateRate: true,
      furWidth: true,
      xSpace: true,
      ySpace: true,
      thick: true,
      allowGap: true,
      options: [],
      options2: [
        {
          id: 1,
          value: "全钢",
        },
        {
          id: 2,
          value: "半钢",
        },
      ],
      options3: [
        {
          id: 1,
          value: "竖放",
        },
        {
          id: 2,
          value: "横放",
        },
      ],
      roateType: [
        {
          label: "不旋转",
          value: 0,
        },
        {
          label: "最大排炉率旋转",
          value: 1,
        },
        {
          label: "最后一列旋转",
          value: 2,
        },
      ],
    };
  },
  methods: {
    //  index 选中的card
    handlerisCheck(item) {
      this.isCheckCard = item.value;
      this.device = item;
      this.getDeviceSignal();
    },
    async openParamSet() {
      this.loadDeviceParam = true;
      this.drawer = true;
      await this.$store.dispatch("listGlass");
      this.initData();
    },
    async initData() {
      this.loadDeviceParam = true;
      let paramList = this.temperList.map((item) => {
        return {
          name: item.deviceType,
          id: item.id,
        };
      });
      await this.$store.dispatch("getDeviceMap", paramList);
      if (this.deviceParamsList.length != 0) {
        this.deviceParams = this.deviceParamsList[this.isCheckCard];
        this.loadDeviceParam = false;
      }
    },
    handlerEditDevice() {
      this.$prompt("请输入密码", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /^5563$/,
        inputErrorMessage: "密码错误",
        inputType: "password",
      })
        .then(({ value }) => {
          deviceEditParam(this.deviceParams).then((res) => {
            if (res.code == 200) {
              this.$message.success("修改设备状态成功");
              this.drawer = false;
              this.initData();
            } else {
              this.$message.error("修改设备状态失败");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    handlerSpace(e) {
      this[e] = !this[e];
      this.$nextTick(() => {
        !this[e] && this.$refs[e].focus();
      });
    },
  },
  created() {
    this.device = temperList[this.isCheckCard];
    this.getSignal(temperDB);
  },
  destroyed() {},
  computed: {
    ...mapState({
      deviceParamsList: (state) => state.deviceStatus.deviceParams,
      glassList: (state) => {
        return state.Glass.glass;
      },
    }),
    glassSelectList() {
      let arr2 = [];
      let filterArr = [1144, 1170, 1171, 1172, 1173, 1174];
      if (this.isCheckCard == 0) {
        arr2 = this.glassList.filter((item) => item.place == 1144);
      }

      if (this.isCheckCard == 1) {
        arr2 = this.glassList.filter((item) =>
          filterArr.includes(item.place * 1)
        );
      }
      return arr2;
    },
    glassType() {
      let arr = [];
      this.glassSelectList.forEach((item) => {
        if (!arr.includes(item.type)) {
          arr.push(item.type);
        }
      });
      return arr;
    },
    batchList() {
      let arr = [];
      this.glassSelectList.forEach((item) => {
        let isUrgent = item.optGlass.urgent <= 2 ? 1 : 0;

        if (!arr.some((a) => a.name == item.optGlass.spareFieldStr5)) {
          arr.push({
            name: item.optGlass.spareFieldStr5,
            urgent: item.optGlass.urgent,
            num: isUrgent,
          });
        } else {
          arr.forEach((a, index) => {
            if (a.name == item.optGlass.spareFieldStr5) {
              arr[index].num += isUrgent;
            }
          });
        }
      });
      arr.sort((a, b) => b.num - a.num);
      return arr;
    },
    ImgUrl() {
      return this.isCheckCard == 0
        ? require("@/assets/images/temper1.jpg")
        : require("@/assets/images/temper2.jpg");
    },
    showDeviceStatus() {
      if (this.deviceList.length == 0) return [];
      let blockAddr = [19, 20, 21, 22, 23, 26];
      let deviceBlock = temperDB[this.isCheckCard].block;
      return this.deviceList[this.isCheckCard].plcSignals.filter(
        (item) => item.block == deviceBlock && blockAddr.includes(item.addr)
      );
    },
  },
  filters: {
    devicePlcStatus(arg) {
      let arr = ["circle-stop", "circle-forbid", "circle-active"];
      if (arg.message == "True") {
        return arr[2];
      } else if (arg.message == "False") {
        return arr[1];
      } else {
        if (arg.message == -1) return arr[0];
        if (arg.message == 1) return arr[1];
        if (arg.message == 0) return arr[2];
      }
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../style/index.less");

img {
  width: 99%;
  height: 99%;
}
.draw_body {
  height: 100%;
}
</style>
